import React,{useState} from 'react';
import { Table,Space,Switch,Radio   } from 'antd';
import {MenuOutlined} from "@ant-design/icons";
import { SortableHandle } from 'react-sortable-hoc';
import DraggableContainer from '@/pages/test/List/components/DraggableContainer';
import DraggableBodyRow from '@/pages/test/List/components/DraggableBodyRow';
export type TableSettingProps = {
  onRef?: any;
  columns?: any;
  sortColumns?: (arr: any) => void;
  hideColumns?: (arr: any) => void;
};
const TableSetting: React.FC<TableSettingProps> = (props) => {

  const {columns,sortColumns,hideColumns} = props;
  //构建列
  const buildColumns = () =>{
    const cols = columns.filter((col: any) =>{
      if(!col.hasOwnProperty('showColumn')){
        //不存在隐藏显示列属性showColumn
        col['showColumn'] = true;
      }
      if(!col.hasOwnProperty('align')){
        col['align'] = 'left';
      }
      if(!col.hasOwnProperty('ellipsis')){
        col['ellipsis'] = false;
      }
      return col.showColumn == true;
    });
    return cols;
  }

  const [oldColumnsData,setOldColumnsData] = useState(buildColumns);

  const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);

  const updateColumns = (data: []) =>{
    setOldColumnsData(data);
    sortColumns?.(data);
  }
  // eslint-disable-next-line @typescript-eslint/no-shadow
  const Dc = (props: any) => <DraggableContainer columns={oldColumnsData} sortColumns={updateColumns} {...props}/>;
  // eslint-disable-next-line @typescript-eslint/no-shadow
  const Dr = (props: any) => <DraggableBodyRow columns={oldColumnsData} {...props}/>;


  const columnsOperate = (e: any,record: object,type: string) =>{
    const data = oldColumnsData;
    const index = data.indexOf(record);
    if(typeof e =='boolean'){
      record[type] = e;
    }
    if(typeof e =='object'){
      record[type] =  e.target.value;
    }
    data.splice(index,1,record);
    const obj = [...data];
    setOldColumnsData(obj);
    hideColumns?.(obj);
  }

  const cls: any = [
    {
      title: '列名',
      dataIndex: 'title',
      key: 'title',
      align: 'left',
      width:120,
      render: (text: any) => {
        return (
          <Space>
            <DragHandle/>{text}
          </Space>
        )
      }
    },
    {
      title: '显隐',
      align: 'center',
      width: '80px',
      render: (text: any, record: any) => {
        return (
          <Switch checked={record.showColumn} onChange={checked => columnsOperate(checked,record,'showColumn')}  size="small"/>
        )
      }
    },
    {
      title: '对齐',
      align: 'center',
      render: (text: any, record: any) => {
        return (
          <Radio.Group defaultValue={record.align} size="small" buttonStyle="solid" onChange={e => columnsOperate(e,record,'align')}>
            <Radio.Button value="left">左</Radio.Button>
            <Radio.Button value="center">中</Radio.Button>
            <Radio.Button value="right">右</Radio.Button>
          </Radio.Group>
        )
      }
    },
    {
      title: '超长省略',
      align: 'center',
      render: (text: any, record: any) => {
        return (
          <Switch checked={record.ellipsis} onChange={checked => columnsOperate(checked,record,'ellipsis')}  size="small"/>
        )
      }
    },
  ];
  return (
    <div>
      <Table
        size="small"
        dataSource={oldColumnsData}
        columns={cls}
        pagination={false}
        rowKey={record => record.key}
        components={{
          body: {
            wrapper:Dc,
            row: Dr,
          },
        }}
      />
    </div>
  );
}
export default TableSetting
